<template>
<div>
  <el-card>
    <!--顶部搜索栏区域-->
    <el-row>
      <el-col>
        <el-form :inline="true">
          <el-form-item label="用户名">
            <el-input size="small" v-model="topForm.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input size="small" v-model="topForm.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getUserInfo">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="resetTopForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--数据展示表格-->
    <el-table
      :data="tableData"
      border
      max-height="500px"
      style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        label="#"
        width="50">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone_number"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="danceType"
        label="舞种">
      </el-table-column>
      <el-table-column
        prop="#"
        label="操作">
        <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button>
          </template>
      </el-table-column>
    </el-table>
    <!--编辑表单-->
    <div>
      <el-dialog
        title="用户编辑"
        :visible.sync="dialogVisible"
        width="50%"
        center>
        <el-form ref="dialogForm" :model="dialogForm" label-width="75px" label-position="left">
          <el-row>
            <el-col span="12">
              <el-form-item label="用户名">
                <el-input v-model="dialogForm.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="密码">
                <el-input v-model="dialogForm.password"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="手机号">
                <el-input v-model="dialogForm.phone_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="邮箱">
                <el-input v-model="dialogForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="24">
              <el-form-item label="舞种">
                <el-radio-group v-model="dialogForm.danceType">
                  <el-radio label="popping">popping</el-radio>
                  <el-radio label="breaking">breaking</el-radio>
                  <el-radio label="locking">locking</el-radio>
                  <el-radio label="hiphop">hiphop</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col span="24">
              <el-form-item>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUserInfo">确 定</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </el-card>
</div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible:false,
      topForm:{
        username:'',
        phone:'',
      },
      defaultTopForm:{
        username:'',
        phone:'',
      },
      editId:'',
      dialogForm:{
        username:'',
        password:'',
        phone_number:'',
        email:'',
        danceType:'',
      },
      tableData: [],
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods:{
    //重置按钮
    resetTopForm() {
      this.topForm = Object.assign({},this.defaultTopForm)
    },
    // 用户信息查询请求
    getUserInfo(){
      this.$axios.get('api/user/info/',{
        params:{username:this.topForm.username, phone_number:this.topForm.phone}
      }).then((response)=>{
        var res = response.data
        if (res['respCode']==='000000'){
          this.tableData=res['list']
          console.log(res['list'])
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    //删除用户请求
    removeUserById(id){
      this.$confirm('确定要删除该用户吗', '提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.$axios.delete('api/user/del/',{
          params:{id: id},
        }).then((res)=>{
          if (res.data['respCode']==='000000'){
            this.$message({ message:'删除成功',type:'success'});
            this.getUserInfo()
          }else {
            this.$message.error(res.data['respMsg'])
          }
        });
      }).catch(()=>{
          this.$message({ type:"info",message:'已取消删除'})
      })
    },
    //编辑按钮
    showEditDialog(id) {
      this.$axios.get('api/user/info/',{
        params:{id:id}
      }).then((res)=>{
        if (res.data['respCode']==='000000'){
          this.dialogForm = res.data['list'][0]
          this.dialogVisible = true
          this.editId = id
        }else {
          this.$message.error(res.data['respMsg'])
        }
      })
    },
    //编辑功能
    updateUserInfo() {
      if (this.editId) {
        this.$axios.get('api/user/edit/', {
          params: {
            id: this.editId,
            username: this.dialogForm.username,
            password: this.dialogForm.password,
            phone_number: this.dialogForm.phone_number,
            email: this.dialogForm.email,
            danceType: this.dialogForm.danceType
          }
        }).then((res) => {
          if (res.data['respCode'] === '000000') {
            this.$message.success('修改成功')
            this.dialogVisible=false
            this.getUserInfo()
          } else {
            this.$message.error(res.data['respMsg'])
            console.log(res.data['respMsg'])
          }
        })
      }
    },
  },
}
</script>
<style scoped>

</style>
